iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 13
0
自我挑戰組

sass&css 30天學習日誌系列 第 13

CSS: Calc +nth選擇器應用: 欄位排版

  • 分享至 

  • xImage
  •  

在做購物網站必定會有產品列表網頁,產品欄位之間的尺寸間距常因為不同需求而有所變動
因此在這範例中嘗試用Calc和 nth-of-type選擇器編排

流程如下:

1.建立外框,裡面放產品內容
2.產品欄位寬度設為calc單位
3.間距使用nth-of-type()

1.建立外框,裡面放產品內容

HTML

https://ithelp.ithome.com.tw/upload/images/20200411/20107321ZovzQsflLD.png

CSS

a. float 並排欄位
b. overflow:hidden 清除浮動
c. text-align:center 圖文置中

https://ithelp.ithome.com.tw/upload/images/20200411/20107321KFOOu3Ej4H.png

結果如下:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321zJbJ4cKsgC.png

2.產品欄位寬度設為calc單位

產品欄位的css中
把寬度改為calc,裡面意思寬度為100%除以3,並剪去6px

https://ithelp.ithome.com.tw/upload/images/20200411/201073216izetbDA6r.png

也就是說,外層content寬度為800px,想要3個欄位為一列
(800/3)-6 = 260.66

https://ithelp.ithome.com.tw/upload/images/20200411/20107321Gf07ZNYcJr.png

更多說明可看下面教學:
使用CSS3中的Calc计算器时需要注意的事情
http://www.webhek.com/post/calc-usage.html
CSS3教學》calc讓CSS單位也可用加、減、乘、除
https://www.minwt.com/webdesign-dev/css/11583.html

3.間距使用nth-of-type()

這個選擇器常常與nth-child()一起討論,功能就是讓表格欄位依據所選的特定欄位 產生效果樣式,
差異如下:
nth-of-type() : 指定標籤產生效果
nth-child() : 同層標籤一起產生效果

更多說明如下
https://www.minwt.com/webdesign-dev/css/10885.html

而為了未來方便維護購物網站,這次使用nth-of-type()

https://ithelp.ithome.com.tw/upload/images/20200411/20107321EmKFj18Os5.png

從下圖中看見圖片是向左邊對齊,右邊還有留白,現在要把圖片平均分配並留間距
剛剛的欄位寬度260.66乘以3個為781.98
總寬度-3個欄位寬度 800-781.98 = 18.02
所以間距要等於18px

https://ithelp.ithome.com.tw/upload/images/20200411/20107321hzaDQ9pekF.png

從上圖可得知,欄位都是靠左對齊,最簡單的方式為由左往右邊推9px
使用calc運算要等於9px,所以把寬度減去的6px再乘以3等於18,除以2後就是9
可是當加上margin-left:calc(6px * 3 / 2),第三個欄位跑到下面

https://ithelp.ithome.com.tw/upload/images/20200411/20107321JEcwWDFioE.png

所以使用 nth-of-type,裡面設定第1.4.7..張圖片margin-left:0

https://ithelp.ithome.com.tw/upload/images/20200411/20107321NoiIjL6Sbs.png

3n+1,使用的計算方法就是 n=0, 選到第一張圖片,以此類推選到第4.7..等圖片

以此方法可以嘗試多排排列

https://ithelp.ithome.com.tw/upload/images/20200411/20107321nfhZeMKT5F.png

nth-of-type()詳細使用方法可看

How nth-child Works
https://css-tricks.com/how-nth-child-works/
使用CSS3 :nth-child(n) 選取器教學
http://t.cn/E7sWSR7

codepen: https://codepen.io/yuski/pen/PyOgGj


上一篇
CSS: SVG上色
下一篇
CSS: CSS Sprite icon 圖示合併
系列文
sass&css 30天學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言